<template>
    <el-table 
    :data="roleList"
     style="width: 100%"
     border
     >
    <el-table-column prop="role_id" label="id" />
    <el-table-column prop="rolename" label="角色名称" width="" />
    <el-table-column prop="description" label="描述" width="" />

    <el-table-column prop="" label="操作" width="" >
        <template #default="{row}">
           <el-button size="small" type="success" @click="getAuth(row)">分配权限</el-button>
           <el-button size="small" type="primary">修改</el-button>
           <el-popconfirm title="Are you sure to delete this?">
            <template #reference>
                <el-button size="small" type="danger">删除</el-button>
            </template>
        </el-popconfirm>
        </template>
    </el-table-column>
    </el-table>



    
  <el-drawer
    v-model="openAuthDrawer"
    title="分配权限"
    direction="ltr"
    
  >
  <el-tree
    style="max-width: 600px"
    ref="tree"
    :data="powerList"
    node-key="id"
    v-if="openAuthDrawer"
    :default-expanded-keys="defaultExpandedKeys"
    :default-checked-keys="defaultCheckedKeys"
    :props="{
      label:'name'
    }"
    
   
    show-checkbox
   
  />

  <el-button size="small" @click="setAuth()" type="success">分配</el-button>
  <el-button size="small" @click="openAuthDrawer=false">取消</el-button>
  </el-drawer>
</template>
<script setup lang='ts'>
  import { onMounted, ref } from 'vue';
  import { powerTree, queryRole, queryRoleAuth,setPower } from '../../api/system';
  import { ElMessage, TreeInstance } from 'element-plus';
import { TreeKey } from 'element-plus/es/components/tree/src/tree.type.mjs';
  interface RoleItem{// 角色列表接口
      create_time:string
      role_id:number
      rolename:string
      description:string
  }
  const tree=ref<TreeInstance>()
  const roleList=ref<Array<RoleItem>>([])// 角色列表
  const powerList=ref<Array<TreeItem>>([])// 权限分类
  const defaultExpandedKeys=ref<number[]>([])// 默认展开 一级权限
  const defaultCheckedKeys=ref<number[]>([])// 默认选中 二级权限
  const openAuthDrawer=ref<boolean>(false)
  let role_id=0
  const getRoleData=async ()=>{
     let res:ResData=await queryRole() as ResData
     if(res.code==200){
         roleList.value=res.data as RoleItem[]
     }
  }
  const getAllAuthData=async ()=>{
      let res:ResData=await powerTree() as ResData
      if(res.code==200){
        powerList.value=res.data as TreeItem[]
      }
  }
  const getAuth=async (row:RoleItem)=>{// 分配权限按钮 
       console.log(row);
       role_id=row.role_id
       //清空之前的状态
       defaultCheckedKeys.value=[]
       defaultExpandedKeys.value=[]
      
       let res:ResData=await queryRoleAuth({role_id:row.role_id}) as ResData
      
       if(res.code==200){
        let arr:ListItem[]=res.data as ListItem[]
        arr.map(v=>{
             
             if(v.parentId){// // 默认选中
                 defaultCheckedKeys.value.push(v.id)
             }else{// // 默认展开
                 defaultExpandedKeys.value.push(v.id)
             }
        })

        console.log(defaultCheckedKeys.value);
        
       }
       
        // 打开抽屉 
        openAuthDrawer.value=true
  }
  const setAuth=async ()=>{
    // console.log(defaultCheckedKeys.value);
    // console.log(tree.value?.getHalfCheckedKeys());// 一级菜单状态 
    let ids:string=[...(tree.value?.getCheckedKeys() as TreeKey[]),...(tree.value?.getHalfCheckedKeys() as TreeKey[])].join(",") as string
    console.log(ids);
    
    let res:ResData=await setPower({role_id,ids}) as ResData

    if(res.code==200){
       openAuthDrawer.value=false// 关闭抽屉
       ElMessage({
      message: res.msg,
      type: 'success',
    })
    }
    
  }
  onMounted(()=>{
    getRoleData()
    getAllAuthData()
  })
</script>
<style scoped >
</style>
